<template>
  <div class="first-letter">
    <p>
      北冥有鱼，其名为鲲。鲲之大，不知其几千里也；化而为鸟，其名为鹏。鹏之背，不知其几千里也；怒而飞，其翼若垂天之云。
      北冥有鱼，其名为鲲。鲲之大，不知其几千里也；化而为鸟，其名为鹏。鹏之背，不知其几千里也；怒而飞，其翼若垂天之云。
      北冥有鱼，其名为鲲。鲲之大，不知其几千里也；化而为鸟，其名为鹏。鹏之背，不知其几千里也；怒而飞，其翼若垂天之云。
    </p>
    <p>
      北冥有鱼，其名为鲲。鲲之大，不知其几千里也；化而为鸟，其名为鹏。鹏之背，不知其几千里也；怒而飞，其翼若垂天之云。
      北冥有鱼，其名为鲲。鲲之大，不知其几千里也；化而为鸟，其名为鹏。鹏之背，不知其几千里也；怒而飞，其翼若垂天之云。
      北冥有鱼，其名为鲲。鲲之大，不知其几千里也；化而为鸟，其名为鹏。鹏之背，不知其几千里也；怒而飞，其翼若垂天之云。
    </p> 
  </div>
</template>
<script>
export default {
  name: 'FirstLetter'
}
</script>

<style lang="stylus" scoped>
  .first-letter
    margin: 20px auto;
    padding: 30px;
    border-radius: 5px;
    background-color: #282c34;
    & > p::first-letter {
      float: left;
      margin-right: 16px;
      font-size: 25px;
      color: #58a;
    }
    color: #fb3;
</style>
